<template>
	<div>
		<div class="no-data" v-show="pieChartData.length === 1">暂无数据</div>
		<div
			id="pieChart"
			ref="barChart"
			class="pie-chart"
			v-show="pieChartData.length > 1"
		></div>
	</div>
</template>

<script>
var option = {
	title: {
		text: '设备数统计',
		left: '2%',
		top: '5%',
		textStyle: {
			color: '#fff',
			fontSize: '0.32rem',
		},
	},
	color: [
		'#44c8f4',
		'#8fddf7',
		'#23cba7',
		'#ffd570',
		'#7f95fa',
		'#3afac1',
		'#1a7dd0',
	],
	tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
  },
	// label: {
  //   formatter: "{b} : {c} ({d}%)"
	// },
	series: [
		{
			type: 'pie',
			radius: '60%',
			data: [],
			// roseType: 'angle',
			itemStyle: {
				normal: {
					shadowBlur: 200,
					shadowColor: 'rgba(0, 0, 0, 0.5)',
				},
			},
		},
	],
}
let myChart = null
import * as echarts from 'echarts';
export default {
	name: 'index',
	props: {
		pieChartData: Array,
	},
	mounted() {
		myChart = echarts.init(document.getElementById('pieChart'))
		myChart.setOption(option)
	},
	methods: {
		// 对数据进行处理
		dealData() {
			myChart.clear()
			let Arr = []
			this.pieChartData.forEach((item, index) => {
				if (item.name !== '主机') {
					Arr[index] = {}
					Arr[index].value = item.count
					Arr[index].name = item.name
				}
			})
			option.series[0].data = Arr
			myChart.setOption(option, true)
		},
	},
	watch: {
		pieChartData() {
			// console.log('************', this.pieChartData)
			this.dealData(this.pieChartData)
		},
	},
}
</script>
<style>
.pie-chart{
	margin:0 auto
}
</style>
<style scoped lang="stylus">
.pie-chart
    width:3.49rem
    height:3.25rem
.no-data
    text-align center
    height 3.25rem
    line-height 3.52rem
</style>
